<template>
  <div class="text">
    <form action="" class="form">
      <el-input
        class="phone-number"
        v-model="phone"
        placeholder="手机号"
      ></el-input>
      <button
        :disabled="!rightphone"
        class="get_verification"
        :class="{ right_phone: rightphone }"
        @click.prevent="getCode()"
      >
        {{ computeTime > 0 ? `已发送${computeTime}(s)` : "获取验证码" }}
      </button>
      <el-input
        class="i-code"
        v-model="verification_code"
        placeholder="验证码"
      ></el-input>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      computeTime: 0,
      verification_code: "",
    };
  },
  computed: {
    rightphone() {
      return /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(
        this.phone
      );
    },
  },
  methods: {
    getCode() {
      //启动倒计时
      if (!this.computeTime) {
        this.computeTime = 30;
        const intervalID = setInterval(() => {
          this.computeTime--;
          if (this.computeTime < 0) {
            clearInterval(intervalID);
          }
        }, 1000);
      }
    },
  },
};
</script>

<style scoped>
.text {
  position: relative;
  margin-bottom: 50px;
}
.phone-number {
  margin-bottom: 30px;
}
.form :nth-child(n) {
  height: 42px;
}
.right {
  color: #eee;
}
.get_verification {
  position: absolute;
  top: 0;
  right: 10px;
  border: 0;
  background-color: transparent;
  font-size: 14px;
  color: #ccc;
}
.right_phone {
  color: #ff8198;
}
</style>